<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link type='text/css' href='../style.css' rel='stylesheet' media="all" />
<script src="../js/jquery-1.7.2.min.js"></script>
<script src="../js/jquery.validate.min.js" type="text/javascript"></script>
<script src="../js/date.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript">
  jQuery(document).ready(function(){
   //jQuery("#ajaxButton").click(function(){
	//var name = $('#user').val();
	var cityID = "1";
	var clickNumber = "0";
    jQuery.ajax({
     type:"POST",
     url:"../jsp/EditGuestUser.jsp",
     data: { 
    	 cityID: cityID,
    	 clickNumber: clickNumber,
           },
     success:function(html){
      //jQuery("#responseDiv").text(html);
      var response = $(html);
      //var oneval = response.filter('#one').text();
      $("#arrivalDate").val(response.filter('#arrivalDate').text());
      $("#departureDate").val(response.filter('#departureDate').text());
      $("#city").html(response.filter('#cities').html());
      $("#district").html(response.filter('#districts').html());
      //jQuery("#user").val(response.filter('#one').text());
      $("#numberOfGuests").val(response.filter('#numberOfGuests').text());
      $("#maxPrice").val(response.filter('#maxPrice').text());
      $("#isMealRequired").val(response.filter('#isMealRequired').text());
      $("#isSmokingAllowed").val(response.filter('#isSmokingAllowed').text());
      $("#isInternetRequired").val(response.filter('#isInternetRequired').text());
      $("#typeOfJourney").val(response.filter('#typeOfJourney').text());
      //$("#minStayDay").val(response.filter('#one').text());
     }
    });
   //});
   $('#city').change(function() {
    	cityID = $('#city option:selected').val();
    	clickNumber = "1";
        jQuery.ajax({
         type:"POST",
         url:"../jsp/EditHostUser.jsp",
         data: { 
        	 cityID: cityID,
        	 clickNumber: clickNumber,
               },
         success:function(html){
          //jQuery("#responseDiv").text(html);
          var response = $(html);
          //var oneval = response.filter('#one').text();
          //$("#city").html(response.filter('#cities').html());
          $("#district").html(response.filter('#districts').html());
         }
    	});
   });
  });
</script>
<script type="text/javascript">
	$(document).ready(function(){
		$.validator.addMethod(
			    "checkDate",
			    function(value, element) {
				       		return Date.parseExact(value, "yyyy-MM-dd");
			    },
			    "Please enter with format yyyy-MM-dd or this date isn't correct"
			);
		$.validator.addMethod(
			    "isDate",
			    function(value, element) {
			    	return Date.parse(value)>new Date();
			    },
			    "ArrivalDate or DepartureDate can't be smaller than today"
			);
		$("#editGuestProfile").validate({
			errorElement: "span",
			rules: {
				date : {
					checkDate : true,
					isDate : true
				}
			}
		});
		//$("#editGuestProfile").validate({
			//errorElement: "span",
		//});
	});
</script>
<title>Edit Guest Profile</title>
</head>
<body>
	<div id="header"></div>
	<script>
		$('#header').load('../header.html');
	</script>
	<!-- call header -->
	<div id="wrap">
		<!-- content ------------------------------------------------------------------------------>
		<div id="content_container">
			<div id="content_wrap">

				<div id="content" class="clr">
					<!-- left sidebar -->
					<div class="left onefifth" id="profile_nav">
						<div id="sidebar"></div>
						<script>
							$('#sidebar').load('sidebar.html');
						</script>
						<!-- call sidebar -->
					</div>
					<!-- end left sidebar -->

					<!-- content ben phai -->
					<div class="right fourfifth" id="profile">
						<h1>Edit your profile</h1>
						<div id="container"></div>
						<form id="editGuestProfile" method="post" action="EditGuestProfile">
				<label>Arrival Date<span class="rq"> * </span></label>
				<input id="arrivalDate" class="date1" type="text" name="arrivalDate">

				<label>Departure Date<span class="rq"> * </span></label>
				<input id="departureDate" class="date1" type="text" name="departureDate">

				<div id="city"></div>

				<div id="district"></div>

				<label>Number of Guests<span class="rq"> * </span></label>
				<input id="numberOfGuests" class="required digits" type="text" name="numberOfGuests">

				<label>Max Price<span class="rq"> * </span></label>
				<input id="maxPrice" type="text" name="maxPrice">

				<label>Meal Required</label>
				<select id="isMealRequired" name="isMealRequired">
					<option value="Y">Yes</option>
					<option value="N">No</option>
				</select>

				<label>Smoking</label>
				<select id="isSmokingAllowed" name="isSmokingAllowed">
					<option value="Y">Yes</option>
					<option value="N">No</option>
				</select>

				<label>Internet Required</label>
				<select id="isInternetRequired" name="isInternetRequired">
					<option value="Y">Yes</option>
					<option value="N">No</option>
				</select>

				<label>Type of Journey</label>
				<select id="typeOfJourney" name="typeOfJourney">
					<option value="Study">Study</option>
					<option value="Tourist">Tourist</option>
				</select>

				<input type="submit" name="Save" value="Save">

		<a href = "Edit-Personal-Trip.html">Edit Personal Trip</a>
	</form>
					</div>

					<!-- het content ben phai -->


					<!-- het content ---------------------------------------------------------------->

					<!-- footer -->
					<div id="footer"></div>
					<script>
						$('#footer').load('../footer.html');
					</script>
					<!-- call footer -->
				</div>
				<!--content -->
			</div>
			<!--content_wrap -->
		</div>
		<!--content container -->
	</div>
	<!--wrap -->
</body>
</html>